<!--  -->
<template>
  <div>
      <div class="tabhu">
          <span class="item" @click="tag=0" :class="{active:tag==0}">全部</span>
            <span class="item" @click="tag=7" :class="{active:tag==7}">华语</span>
              <span class="item" @click="tag=96" :class="{active:tag==96}">欧美</span>
                <span class="item" @click="tag=8" :class="{active:tag==8}">日本</span>

      </div>
      <table class="tables">
          <thead>
              <th></th>
              <th></th>
              <th>音乐标题</th>
              <th>歌手</th>
              <th>专辑</th>
              <th>时长</th>
          </thead>
          <tbody>
         <tr v-for="(item,index) in zuixinliu" :key="index">
             <td>{{index+1}}</td>
             <td>{{item.name}}</td>
             <td>
                 <img :src="item.album.blurPicUrl" />
                 <div class="bofff" @click="playerty(item.id)"></div>
             </td>
             <td>{{item.album.artists['0'].name}}</td>
             <td>{{item.album.company}}</td>
             <td>{{item.duration}}</td>
         </tr>

          </tbody>

      </table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'zuixin',
    data(){
        return{
           
            zuixinliu:[],
            tag:"0"
        }
    },
    watch:{
           tag(){
               this.getlist()
           }
    },
    created(){
   this.getlist()

    },
    methods:{
        // 获取列表数据
          getlist(){
 axios({
           url:'https://autumnfish.cn/top/song',
           method:'get',
           params:{
              
               type:this.tag
           }
    }).then(res=>{
         
       console.log(res)
       this.zuixinliu=res.data.data
//   处理毫秒 转为分秒
        for(let i=0;i<this.zuixinliu.length;i++){
            let sddds = this.zuixinliu[i].duration
            // 假定 30000毫秒
            // 秒30000/1000 30秒
            // 分 /60
            let min=parseInt(sddds/1000/60)
            if(min<10){
                min="0"+min
            }
            let sec=parseInt(sddds/1000%60)
             if(sec<10){
                min="0"+min
            }
            this.zuixinliu[i].duration=`${min}分${sec}秒`
            console.log(min+"|"+sec)

           
        }

    })
          },
          playerty(id){
            axios({
           url:'https://autumnfish.cn/song/url',
           method:'get',
           params:{
               id
           }
    }).then(res=>{
         
    console.log(res)
      let uty=res.data.data[0].url
      this.$parent.musicUrl=uty

    })
          }
    }

}

</script>
<style>
.tables,th,td{
    border: 1px solid #000;
     border-collapse: collapse;
}
.tables{
    width: 100%;
}
.tables th{
    height: 30px;
} 
.tables td{
    height: 60px;
    background: chartreuse;
    text-align: center;
    line-height: 60px;
    
}
.tables td img{
    width:50px ;
    height: 50px;
    margin-top: 20px;
}
.tables td .bofff{
    width: 40px;
    height: 40px;
    background: red;
    margin-left: 40px;
    margin-bottom: 20px;
}
.tabhu{
    height: 30px;
    background: chartreuse;
    text-align: end;
    line-height: 30px;
}
.tabhu span{
    font-size: 16px;
    margin-right: 50px;
}
.tabhu span.active{
    color:red;
}

</style>